<template>
  <div class="filter-form__container v-flex-fixed">
    <el-form ref="filterForm" :model="form" @keyup.enter.native="search" @submit.native.prevent>
      <filter-item
        v-for="(value, key) in data"
        :key="key"
        :form="form"
        :item="value"
        :split="split" />
      <template v-if="hasDefaultOperation">
        <el-button
          class="filter-form__button"
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="search">查询</el-button>
        <template v-if="!onlyQuery">
          <el-button
            v-permission-button="publicConfig['ITPS-ADD']"
            class="filter-form__button"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="addForm">{{ addText }}</el-button>
        </template>
      </template>
      <slot />
    </el-form>
  </div>
</template>
<script>
import FilterItem from './FilterItem'
export default {
  name: 'FilterForm',
  components: { FilterItem },
  props: {
    form: {
      required: true,
      type: Object,
      default() {
        return {}
      }
    },
    data: {
      required: true,
      type: Object,
      default() {
        return {}
      }
    },
    addText: {
      type: String,
      default: '添加'
    },
    hasDefaultOperation: {
      type: Boolean,
      default: true
    },
    onlyQuery: {
      type: Boolean,
      default: false
    },
    split: {
      type: Number,
      default: 5
    }
  },
  created() {
    console.info('-------------------')
  },
  methods: {
    search() {
      this.$emit('search')
    },
    addForm() {
      this.$emit('addForm')
    }
  }
}
</script>
<style lang="scss">
.filter-form__container {
  font-size: 0;
  .filter-item {
    display: inline-block;
    padding-right: 10px;
    vertical-align: middle;
    .el-form-item {
      margin-bottom: 10px;
      .el-form-item__content {
        line-height: 28px;
      }
    }
    .el-input,
    .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    .el-input__icon {
      line-height: 28px;
    }
    .el-date-editor.el-input {
      width: 100%;
    }
    .el-select{
      .el-select__tags-text{
        display: inline-block;
        max-width: 55px;
        overflow: hidden;
        vertical-align: middle;
      }
    }
  }
  .filter-form__button {
    margin-bottom: 10px;
    border-bottom: none;
  }
}
</style>
